<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<link href="<c:url value='/css/easyui.css'/>" rel="stylesheet">
<link href="<c:url value='/css/icon.css'/>" rel="stylesheet">
<script src="<c:url value='/js/jquery.min.js'/>"></script>
<script type="text/javascript"
	src="<c:url value='/js/jquery.easyui.min.js'/>"></script>
<script src="js/cdsf_map.js"></script>
<script type="text/javascript">
	var paramMap = new Map();
	$(function() {		
		$("#btn_add_param")
		.click(
				function() {
					$("#param_name_group").removeClass("control-group error");
					$("#param_name_group").addClass("controls");
					var fun_param_name = $("#fun_param_name").val().trim();
					if (fun_param_name == "") {
						$("#param_name_group").addClass("control-group error");
						return false;
					}else{
						if(paramMap.containsKey(fun_param_name)){
							$("#param_name_group").addClass("control-group error");
							return false;
						}
						var param = $("#param_type option:selected")
						.text().trim()
						+ " "
						+ fun_param_name;
						
						$("#fun_param_name").val("");
						paramMap.put(fun_param_name,"");
						$("#param_list")
						.append(
								'<div class="controls">'
										+ '<input type="hidden" id="param_type_temp" value="'
										+ $(
												"#param_type option:selected")
												.val().trim()
										+ '">'
										+ '<input type="hidden" id="param_name_temp" value="'
										+ fun_param_name
										+ '">'
										+ '<code id="param_code">'+ param+ '</code>'
										+'<button style="margin-left:50px;margin-bottom:5px" type="button" class="btn" onclick="deltr(this)">删除</button></div>');
					}
					$("#param_name_group").removeClass("control-group error");
					$("#param_name_group").addClass("controls");	
				});
	});
	
	function deltr(delbtn) {
		var temp = $(delbtn).parents(".controls").children("#param_name_temp").val();
		paramMap.remove(temp);
		$(delbtn).parents(".controls").remove();
	}
	
	function add_interface() {
		$("#addInterface").dialog('open');
	}
	function refreshAddDiv(){
		$("#param_name_group").removeClass("controls error");
		$("#param_name_group").addClass("controls");
		$("#fun_name_group").removeClass("controls error");
		$("#fun_name_group").addClass("controls");
		$("#param_list").html("");
		paramMap = new Map();
	}
	
	function addFunction(){		
		var fun_name = $("#fun_name").val().trim();
		if (fun_name == "") {
			$("#fun_name_group").addClass("control-group error");
			return false;
		}
		var fun_params = "";
		var fun_params_id = "";
		var params = new Array();
		var paramsId = new Array();
		$("#param_list .controls").each(
				function() {
					var param = $(this).children("#param_code").text().trim();
					params.push(param);
					var type_id = $(this).children("#param_type_temp").val().trim();
					paramsId.push(type_id);
					
				});
		fun_params = params.join(";");
		fun_params_id = paramsId.join(";");
		
		var fun_des = $("#fun_des").val().trim();
		if (fun_des == "" || fun_des == null) {
			fun_des = " ";
		}
		if (fun_params == "" || fun_params == null) {
			fun_params = " ";
		}
		if (fun_params_id == "" || fun_params_id == null) {
			fun_params_id = " ";
		}
		
		$("#fun_name").val("");
		$("#fun_des").val("");
		var signature = $("#fun_signature").val().trim();
		if (signature == "" || signature == null) {
			signature = $("#return_type option:selected")
			.text().trim()
			+ "  "
			+ fun_name
			+ "("
			+ params.join(",")
			+ ");";
		}
		$("#fun_signature").val("");
		
		$("#list")
				.append(
						'<div class="controls">'
								+ '<input type="hidden" name="re_type" value="'
								+ $(
										"#return_type option:selected")
										.val().trim()
								+ '">'
								+ '<input type="hidden" name="f_name" value="'
								+ fun_name
								+ '">'
								+ '<input type="hidden" name="f_params_id" value="'
								+ fun_params_id
								+ '">'
								+ '<input type="hidden" name="f_params" value="'+fun_params + '">'
								+ '<input type="hidden" name="f_sig" value="'+signature + '">'
								+ '<input type="hidden" name="f_description" value="'
								+ fun_des
								+ '">'
								+ '<code>'
								+ signature
								+ '</code><button style="margin-left:50px;margin-bottom:5px" type="button" class="btn" onclick="deltr(this)">删除</button></div>');
		$("#addInterface").dialog('close');
		refreshAddDiv();
	}
	
	function valid() {
		$("#help_name").val("英文");
		$("#help_interface").val("");
		$("#div_interface").removeClass("control-group error");
		$("#div_interface").addClass("control-group");
		$("#div_name").removeClass("control-group error");
		$("#div_name").addClass("control-group");
		var name = $("#name").val().trim();

		var interfaces = $("#list").children().length;

		if (name == "") {
			$("#div_name").removeClass("control-group");
			$("#div_name").addClass("control-group error");
			document.getElementById("help_name").innerHTML = "英文,接口名称不能为空";
			return false;
		}
		if (interfaces == 0) {
			$("#div_interface").removeClass("control-group");
			$("#div_interface").addClass("control-group error");
			document.getElementById("help_interface").innerHTML = "请为该接口添加函数";
			return false;
		}
		return true;
	}

	function goback() {
		history.go(-1);
	}
</script>
<div class="page-header">
	<h3 style="margin-top: auto">新增接口</h3>
</div>
<div class="row-fluid">
	<div>
		<form class="form-horizontal"
			action="<%=request.getContextPath()%>/interface/add" method="POST"
			onsubmit="return valid()">
			<div class="control-group" id="div_name">
				<label class="control-label">名称</label>
				<div class="controls">
					<input type="text" placeholder="名称" id="name" name="name"
						class="input-xxlarge"> <span class="help-inline"
						id="help_name">英文</span>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">描述信息</label>
				<div class="controls">
					<textarea rows="3" class="input-xxlarge" placeholder="描述信息"
						id="description" name="description"></textarea>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">接口类别</label>
				<div class="controls">
					<div class="form-inline">
						<select style="width: 200px" id="itype" name="itype"
							tabindex="1">
							<option value="总线通信">总线通信</option>
							<option value="控制响应">控制响应</option>
							<option value="IO通信">IO通信</option>
							<option value="信息显示">信息显示</option>
							<option value="其他">其他</option>
						</select>
					</div>
				</div>
			</div>
			<div class="control-group" id="div_interface">
				<label class="control-label">函数列表</label>
				<div id="list"></div>
				<div class="controls">
					<button type="button" class="btn" id="btn_add_div"
						onclick="add_interface()"><i class="icon-plus"></i>&nbsp;添加函数</button>
					<span class="help-inline" id="help_interface"></span>
				</div>
			</div>
			<div class="control-group">
				<div class="controls">
					<button type="submit" class="btn" id="submit"><i class="icon-ok"></i>&nbsp;提交</button>
					<button type="button" class="btn" style="margin-left=50px;" onclick="goback()"><i class="icon-remove"></i>&nbsp;取消</button>
				</div>
			</div>
		</form>
	</div>
</div>
<!--/row-->
<div id="addInterface" class="easyui-dialog" title="添加函数"
	style="width: 600px; height: auto; padding: 10px" closed="true"
	data-options="iconCls: 'icon-add-dialog'" buttons="#dlg-buttons">
	<div>
		<div class="control-group">
			<div class="controls">
			<div class="form-inline">返回类型&nbsp;&nbsp;
				<select style="width: 280px" id="return_type">
					<c:choose>
						<c:when test="${!empty typeList}">
							<c:forEach items="${typeList}" var="item">
								<option value="${item.id}">
									<c:out value="${item.name}" />
								</option>
							</c:forEach>
						</c:when>
					</c:choose>
				</select>
			</div>
			</div>
		</div>
		<div class="control-group">
			<div class="controls" id="fun_name_group">
			<div class="form-inline">函数名称&nbsp;&nbsp;
				<input type="text" class="input-xlarge" placeholder="函数名称"
					id="fun_name"><span class="help-inline" id="help_fun_name">英文</span>
			</div>
			</div>
		</div>
		<div class="control-group">
			<div class="controls" id="fun_signature_group">
				<div class="form-inline">函数签名&nbsp;&nbsp;
					<input type="text" style="width: 450px" placeholder="函数签名(默认生成)"
						id="fun_signature">
				</div>
			</div>
		</div>

		<div class="control-group">
			<label class="control-label">参数列表</label>
			<div id="param_list"></div>
			<div class="controls" id="param_name_group">
				<select style="width: 250px" id="param_type">
					<c:choose>
						<c:when test="${!empty typeList}">
							<c:forEach items="${typeList}" var="item">
								<option value="${item.id}">
									<c:out value="${item.name}" />
								</option>
							</c:forEach>
						</c:when>
					</c:choose>
				</select> <input type="text" class="input-large" placeholder="参数名称"
					id="fun_param_name"> <button type="button" style="margin-bottom: 12px" class="btn" id="btn_add_param"><i class="icon-plus"></i>&nbsp;添加</button>
			</div>
		</div>
		<div class="control-group">
			<div class="controls">
				<div class="form-inline">
				描述信息&nbsp;&nbsp;
					<textarea rows="1" class="input-xxlarge" placeholder="描述信息"
						id="fun_des"></textarea>
				</div>
			</div>

		</div>
	</div>
		<div id="dlg-buttons" style="float: right;">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-ok-dialog" onclick="dlgOK()">确定</a> <a
				href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-cancel-dialog" onclick="dlgCancel()">关闭</a>
		</div>
		<script type="text/javascript">
			$(function() {
				$('#addInterface').dialog('close');
			});
			function dlgOK(){
				$('#addInterface').dialog('close');
				addFunction();
			}
			function dlgCancel(){
				$('#addInterface').dialog('close');
				refreshAddDiv();
			}
		</script>